<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>new jsp</title>
    <script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    <script>

        $(function () {
           $("#username").blur(function () {

               //获取用户名
               var name = $(this).val();

               //判断用户名不为空和空串
               if(name != null && name != ""){
                   //向后台发送请求,验证用户名
                   $.ajax({
                       url:"/checkName",
                       type:"GET",
                       data:{username:name},
                       dataType:"json",
                       success:function (data) {
                           if(data.flag){
                               //设置span的内容体
                               $("#spanMsg").html("<font color='red'>" +data.msg+"</font>");
                           }else if(!data.flag){
                               $("#spanMsg").html("<font color='green'>" +data.msg+"</font>");
                           }
                       },
                       error:function () {
                            alert("请求处理失败!");
                       }
                   });
               }
           })
        });


    </script>

</head>
<body>
    <form action="#" method="post">

        用户名: <input type="text" id="username" name="username" placeholder="请输入用户名">
        <span id="spanMsg" style="color: red"></span> <br>
        密码:<input type="text" id="password" name="password" placeholder="请输入密码">
    </form>
</body>
</html>